<template>
  <div style=" width: 100%;height: 93vh;background-color: #ebebeb">
    <div style="border: 1px solid lavender ;float: left;height: 100%;width: 25%;margin-top: 1px;background-color: #ebebeb ">
      <div style="border: 1px solid lavender;width: 107%;height: 28%;margin-left: -10px;;margin-top: -10px;background-color: #fcfcfc">
        <div  style="margin-left: -10px">
          <div style="margin-top: -20px"></div>
          <div class="marker" style="float: left"></div>
          <div style=" ;margin-top: -7px;margin-left: 10px;font-size: 12px;font-weight: bold;" >&nbsp;&nbsp;&nbsp;司机</div>
        </div>
        <div class="divDriver1" style="float: left;width: 30%">
          <div class="divDriver2"  ><span></span></div>
          <div class="divDriver3" >司机总数1</div>
        </div>
        <div class="divDriver1" style="float: left;width: 30%;margin-left: 34px">
          <div class="divDriver2"  >300</div>
          <div class="divDriver3" >待发车司机</div>
        </div>
        <div class="divDriver1" style="float: right;margin-top: 1px;width: 30%">
          <div class="divDriver2"  >300</div>
          <div class="divDriver3">在途司机</div>
        </div>
        <div class="divDriver1" style="float: left;margin-top: 35px;width: 30%">
          <div class="divDriver2"  >300</div>
          <div class="divDriver3" >待返车司机</div>
        </div>
        <div class="divDriver1" style="margin-top: 35px;width: 30%;float: right;margin-left: 10px">
          <div  class="divDriver2"  >300</div>
          <div class="divDriver3" >人均运输时长</div>
        </div>
      </div>
      <div style="border: 1px solid lavender;width: 107%;height: 25%;margin-left: -10px;margin-top: 20px;background-color: #fcfcfc">
        <div style="margin-left: -10px">
          <div style="margin-top: -20px"></div>
          <div class="marker" style="float: left"></div>
          <div style=" ;margin-top: -7px;margin-left: 10px;font-size: 12px;font-weight: bold;" >&nbsp;&nbsp;&nbsp;车辆装载</div>
        </div>
        <div style="margin-top: -50px">
          <yuan></yuan>
        </div>
      </div>
      <div style="border: 1px solid lavender;width: 107%;height: 56%;margin-left: -10px;margin-top: 20px;background-color: #fcfcfc">
        <div style="margin-left: -10px">
          <div style="margin-top: -20px"></div>
          <div class="marker" style="float: left"></div>
          <div style=" ;margin-top: -7px;margin-left: 10px;font-size: 12px;font-weight: bold;" >&nbsp;&nbsp;&nbsp;目的运输量</div>
        </div>
        <div style="height: 10px;width: 80%;margin-top: -60px"><HistorGam></HistorGam></div>
      </div>
    </div>
    <div style="border: 1px solid lavender;float: left;height: 100%;width: 44%;margin-left: 20px;margin-top: 1px;background-color: #fcfcfc">
      <div>
        <div>
          <div style="margin-top: -30px"></div>
          <div class="marker" style="float: left"></div>
          <div style=" ;margin-top: -10px;margin-left: 10px" >&nbsp;&nbsp;&nbsp;运单统计</div>
        </div>
        <div class="container" style="margin-left: -64px">
          <div class="YunDan1"  >
            <div class="icon-text-wrapper">
              <el-icon class="YunDan2" style="color: #41a3fc" name=" el-icon-s-order "></el-icon>
              <div class="text-wrapper">
                <div class="number">2035</div>
                <div>运单总数</div>
              </div>
            </div>
          </div>
          <div class="YunDan1">
            <div class="icon-text-wrapper">
              <el-icon class="YunDan2" style="color: #e75006;margin-left: -20px" name=" el-icon-s-promotion "></el-icon>
              <div class="text-wrapper">
                <div class="number">2035</div>
                <div>待返车</div>
              </div>
            </div>
          </div>
          <div class="YunDan1">
            <div class="icon-text-wrapper">
              <el-icon class="YunDan2" style="color: #e72504;margin-left: -10px" name=" el-icon-truck "></el-icon>
              <div class="text-wrapper">
                <div class="number">2035</div>
                <div>运输中</div>
              </div>
            </div>
          </div>
          <div class="YunDan1">
            <div class="icon-text-wrapper">
              <el-icon class="YunDan2" style="color: #38e71d;margin-left: -10px" name=" el-icon-s-flag "></el-icon>
              <div class="text-wrapper">
                <div class="number">2035</div>
                <div>已到达</div>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div>
        <div>
          <div style="margin-top: -30px"></div>
          <div class="marker" style="float: left"></div>
          <div style=" ;margin-top: -10px;margin-left: 10px" >&nbsp;&nbsp;&nbsp;运单路线图</div>
        </div>
        <div>
          <WiringDiagram></WiringDiagram>
        </div>
      </div>
    </div>
    <div style="border: 1px solid lavender;float: right;height: 100%;width: 29%;margin-top: 1px;background-color: #ebebeb">
      <div style="height: 21%;background-color: #fcfcfc;margin-top: -10px">
        <div>
          <div style="margin-top: -30px"></div>
          <div class="marker" style="float: left"></div>
          <div style=" ;margin-top: -10px;margin-left: 10px" >&nbsp;&nbsp;&nbsp;运输准时率</div>
        </div>
        <div style="margin-top: -15px;margin-left: -10px">
          <div style="float: left"> <el-icon class="YunDan2" style="color: #e72504" name=" el-icon-truck "></el-icon></div>
          <span class="XuXian"></span>
          <div style="float: right;"> <el-icon class="YunDan2" style="color: #38e71d" name=" el-icon-s-flag "></el-icon></div>
        </div>
        <div></div>
        <div style="margin-top: -15px;margin-left: -59px;float: left">
          <div>75%</div>
          <div style="margin-top: -15px">发送准时率</div>
        </div>

        <div style="margin-top: -15px;margin-right: -65px;float: right">
          <div style="margin-left: 42px">75%</div>
          <div style="margin-top: -15px">到达准时率</div>
        </div>
      </div>
      <div style="background-color: #e7430a;margin-top: 15px;height: 17%  ">
        <div>
          <div style="color: #ffffff; font-size: 14px; font-weight: bold;margin-top: -14px;margin-left: -15px">异常运输</div>
          <div style="color: #ffffff; font-size: 19px; font-weight: bold;margin-top: -5px;margin-left: 10px">&nbsp;&nbsp;1221211</div>
          <div style="color: #ffffff; font-size: 14px; font-weight: bold;margin-top: -5px;margin-left: 10px">&nbsp;&nbsp;&nbsp;异常运输总量</div>
        </div>
        <div style="float: right;margin-top: -160px"><Yuanxjinddu></Yuanxjinddu></div>
      </div>
      <div style="margin-top: -80px;width: 100%;">
        <div style="margin-top: -60px; width: 100%">
          <table style="border-collapse: collapse;background-color: #fcfcfc; width: 113%; margin-left: -22px; margin-top: 10px;">
            <!-- 表头 -->
            <tr>
              <th style=" padding: 5px 10px; text-align: left;  " v-for="(column, columnIndex) in tableColumns" :key="columnIndex">{{ column }}</th>
            </tr>
            <!-- 数据行 -->
            <tr v-for="(row, rowIndex) in tableData1" :key="rowIndex">
              <td v-for="(cell, cellIndex) in row" :key="cellIndex" style="padding: 5px 10px;">{{ cell }}</td>
            </tr>
          </table>
        </div>
      </div>
      <div style="margin-top: -80px;width: 100%;">
        <div style="margin-top: 50px; width: 100%">
          <table style="border-collapse: collapse;background-color: #fcfcfc; width: 113%; margin-left: -22px; margin-top: 10px;">
            <!-- 表头 -->
            <tr>
              <th style=" padding: 5px 10px; text-align: left;  " v-for="(column, columnIndex) in tableColumns" :key="columnIndex">{{ column }}</th>
            </tr>
            <!-- 数据行 -->
            <tr v-for="(row, rowIndex) in tableData2" :key="rowIndex">
              <td v-for="(cell, cellIndex) in row" :key="cellIndex" style="padding: 5px 10px;">{{ cell }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

  </div>

</template>

<script >
import yuan from "@/views/dataview/Yuan.vue";
import HistorGam from "@/views/dataview/HistorGam.vue";
import WiringDiagram from "@/views/dataview/WiringDiagram.vue";
import Yuanxjinddu from "@/views/dataview/Yuanxjinddu.vue";

export default {

  components: {
    yuan,
    HistorGam,
    WiringDiagram,
    Yuanxjinddu
  },

  data() {

    return {

      tableColumns: ["Column 1", "Column 2", "Column 3"], // 列名数据
      tableData1: [
        ["311686965346510", "品达河北分公司", "09:02:10"],
        ["2681259653423402", "廊坊转运中心", "09:06:22"],
        ["2681259653423402", "廊坊转运中心", "09:06:22"],
        ["2681259653423402", "廊坊转运中心", "09:06:22"],
      ],
      tableData2: [
        ["311686965346510", "品达河北分公司", "09:02:10"],
        ["2681259653423402", "廊坊转运中心", "09:06:22"],
        ["2681259653423402", "廊坊转运中心", "09:06:22"],
        ["2681259653423402", "廊坊转运中心", "09:06:22"],
        ["2681259653423402", "廊坊转运中心", "09:06:22"],
        ["2681259653423402", "廊坊转运中心", "09:06:22"],
        ["2681259653423402", "廊坊转运中心", "09:06:22"],
      ]
    };
  }
}
</script>



<style scoped>
div {
//border: 1px solid red; /* 添加红色边框 */
  padding: 10px; /* 添加内边距 */
}

.divDriver1 {
  width: 20%;
  height: 20%
}
.divDriver2 {
  width: 100%;
  height: 20%;
  margin-top: -10px;
  margin-left: -10px;
  color: #41a3fc;
}
.divDriver3 {
  width: 100%;
  height: 20%;
  margin-left: -10px;
  color: #0e100d;
  font-size: 12px;

}
.YunDan1 {
  float: left;
  margin-left: 25px;
}
.YunDan2 {
  float: left;
  font-size: 30px;


}
.container {
  display: flex;
}

.icon-text-wrapper {
  display: flex;
  align-items: center;
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  margin-left: 10px; /* 调整图标和文本之间的间距 */
}

.number {
  font-weight: bold; /* 设置数字部分为粗体 */
}
.marker {
  width: 0.1px; /* 设置标记宽度为1px */
  height: 0.1px; /* 设置标记高度为1px */
  background: linear-gradient(136deg, #db342d, #fe977e 79%, #fdb892 99%); /* 应用渐变色背景 */
  margin-right: 1px; /* 设置标记与文本间距 */
  margin-top: 1px;
}
.XuXian {
  display: inline-block;
  width: 260px; /* 设置虚线宽度 */
  border-bottom: 1px dashed #000; /* 底部为虚线样式 */
}
</style>
